<template>
    <div class="all">
        <too></too>
        <div class="dizhi">
            <div class="dz_tit">联系我们</div>
            <img src="../assets/xiantu.png" class="lx_img"/>
            <div class="dz_con">作为专业面向企事业单位、制造商和运营商的定制软件开发和解决方案服务专家，尚新可为您提供系统化解决方案和服务。期待您选择尚新科技！</div>
        </div>
      <div id="container" class="map"></div>
      <foo></foo>
    </div>
</template>

<script>

  import AMap from 'AMap'
  import too from '../components/too'
  import foo from '../components/foo'
export default {
  name: 'contact',
  components: {
    too,
    foo,
    AMap
  },
  data() {
    return {

    }
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
    })
    this.GaodeMap();
  },
  methods: {
    GaodeMap(){
      var marker, map = new AMap.Map('container', {
        center: [117.189121,34.19309], // [纬度，经度]
        resizeEnable: true,
        zoom: 13
      });
        marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [117.189121,34.19309],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.all{
    width: 100%;
    font-size: 0.3rem;
    color: #333333;
}
.map{
  width: 80%;
  height: 900px;
  margin: 0 auto;
  position: relative;
  bottom: 1rem;
  z-index: 22;
}
.dizhi{
    width: 100%;
    height: 35vw;
    text-align: center;
    font-size: 0.35rem;
    background: url(../assets/beijing1.png) no-repeat;
    background-size: 100% 100%;
}
.lx_img{
  width: 36%;
  height: auto;
  margin: 0.2rem 0 0 0;
}
.dz_tit{
    color: #fff;
    font-size: 3vw;
    padding: 5vw 0 0 0;
    letter-spacing: 0.1rem;
}
.dz_con{
    width: 72%;
    margin: auto;
    font-size: 1.8vw;
    letter-spacing: 0.05rem;
    line-height: 3.5vw;
    color: #fff;
    padding-top: 0.3rem;
}
</style>
